<template>
  <div>
    <div class="t-date">
      切换时间查看历史预测
      <el-date-picker
        v-model="searchDate"
        :disabled-date="disabledDate"
        :clearable="false"
        type="date"
        @change="changeDate"
      />
    </div>

    <el-table
      :data="data"
      :default-sort="{ prop: 'changePercent', order: 'descending' }"
    >
      <el-table-column prop="code" label="股票代码" width="130">
        <template #default="{ row }">
          <el-button
            type="info"
            icon="DocumentCopy"
            @click="handleCopy(row.code)"
          >
            {{ row.code }}
          </el-button>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="股票名称" width="120" />
      <el-table-column label="所属板块" width="174">
        <template #default="{ row }">
          {{ row.sector ? row.sector : ''
          }}{{ row.region ? `(${row.region})` : '' }}
        </template>
      </el-table-column>
      <el-table-column prop="predictedPrice" label="预测时价格" />
      <el-table-column prop="price" label="当前价格" />
      <el-table-column label="价格变化">
        <template #default="{ row }">
          <span
            style="font-weight: 700"
            :class="
              row.price - row.predictedPrice >= 0 ? 'up-text' : 'down-text'
            "
          >
            {{ (row.price - row.predictedPrice).toFixed(2) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="涨跌幅">
        <template #default="{ row }">
          <span
            style="font-weight: 700"
            :class="
              row.price - row.predictedPrice >= 0 ? 'up-text' : 'down-text'
            "
          >
            {{
              (((row.price - row.predictedPrice) / row.price) * 100).toFixed(2)
            }}%
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="predictionTime" label="预测时间" min-width="120" />
      <el-table-column label="量化得分" sortable prop="predictionScore">
        <template #default="{ row }">
          <div
            class="score-text"
            :style="{ color: getScoreColor(row.predictionScore) }"
          >
            {{ Math.round(row.predictionScore) }}分
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import dayjs from 'dayjs';
import { handleCopy } from '../method/index.js';
import { stockStore } from '@/store/stock';
const store = stockStore();
const data = computed(() => store.historicalPredictions);
const searchDate = ref(dayjs().format('YYYY-MM-DD'));

const disabledDate = (date) => {
  const threeDate = dayjs().subtract(31, 'day');
  const day = dayjs(date).day();
  return (
    day === 0 ||
    day === 6 ||
    dayjs(date).isBefore(threeDate) ||
    dayjs(date).isAfter()
  );
};
onMounted(() => {
  const day = dayjs().day();
  if (day === 0 || day === 6) {
    if (day === 6) {
      searchDate.value = dayjs().subtract(1, 'day').format('YYYY-MM-DD');
    } else {
      searchDate.value = dayjs().subtract(2, 'day').format('YYYY-MM-DD');
    }
  }
  changeDate(searchDate.value);
});

const changeDate = (searchDate) => {
  store.fetchHistoryStockRecommendation(dayjs(searchDate).format('YYYY-MM-DD'));
};
const getScoreColor = (score) => {
  if (score >= 65) return '#f56c6c';
  return '#67C23A';
};
</script>

<style lang="scss" scoped>
.t-date {
  margin-bottom: 4px;
  color: #f56c6c;
  font-size: 18px;
}
</style>
